<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <meta charset="utf-8">
    <title>时光槽</title>
    <meta name="keywords" content=" "/>
    <meta name="description" content=" ">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="${ctxStatic}/shopcartstatic/css/video/weui.min.css">
    <link rel="stylesheet" href="${ctxStatic}/shopcartstatic/css/video/style.css">
    <link rel="stylesheet" href="${ctxStatic}/shopcartstatic/css/video/video.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<header class="header">
    <div class="h-back" onclick="javascript:history.go(-1)" ><span></span></div>
    <div class="h-title">时光槽</div>
    <div class="h-right j_publish"><span></span></div>
</header>
<div class="weui-tab">
    <div class="weui-navbar">
        <div class="weui-navbar__item weui-bar__item_on" data-type="1">最新</div>
        <div class="weui-navbar__item" data-type="2">最热</div>
        <div class="weui-navbar__item" data-type="3" onclick="window.location.href='skip'">吐槽栏</div>
    </div>
    <div class="weui-tab__panel">
        <ul class="timeline-list">
            <c:forEach var="list" items="${page}">
                <div style="display: none" id="comId">${list.id}</div>
                <li class="timeline-item">
                    <div class="timeline-item-h box">
                        <div class="timeline-item-h-avatar">
                            <img alt="" src="${ctxStatic}/shopcartstatic/images/user-img.jpg"
                                 style="height: 2.5rem;width: 2.5rem">
                        </div>
                        <div class="timeline-item-h-user">
                            <img alt="" src="">
                            <p style="color: #43a1e4;">${list.user.name}</p>
                            <p style="font-size: small"><fmt:formatDate value="${list.updateDate}" pattern="yyyy-MM-dd HH:mm:ss"/></p>
                        </div>
                    </div>
                    <div class="timeline-item-c">${fns:abbr(list.content,100)}</div>
                    <div class="timeline-item-pic">
                        <div class="item-pic"><img alt="" src="<%--${ctxStatic}/shopcartstatic/images/hei1.png--%>${list.picture}" width="100px" height="100px"></div>

                    </div>
                    <div class="timeline-item-opt">
                        <button class="like"><i class="ic-like active"></i><span style="color: #65ca00">赞</span>&nbsp;58
                        </button>
                        <button class="unlike"><i class="ic-unlike"></i><span style="color: #9a161a">踩</span>&nbsp;58
                        </button>
                        <button class="comment" onclick="aaa(this,'${list.id}')"><i class="ic-comment"></i>回复</button>
                    </div>
                    <div class="null-content">
                        <div class="timeline-item-comment">
                            <ul class="comment-list">
                                <c:forEach var="reply" items="${list.getReplyList()}">
                                    <li class="comment-item">
                                        <span class="comment-nickname" onclick="bbb(this,'${list.id}','${reply.getRPerson()}')">${reply.getRPerson()}</span>
                                        <c:if test="${reply.getRedPerson()!=null}">
                                        回复<span class="comment-nickname" onclick="bbb(this,'${list.id}','${reply.getRedPerson()}')">${reply.getRedPerson()}：</span>
                                        </c:if>
                                        <c:if test="${reply.getRedPerson()==null}">
                                            <span class="comment-nickname">：</span>
                                        </c:if>
                                            ${reply.getRNews()}
                                    </li>
                                </c:forEach>
                            </ul>
                            <div class="triangle-up"></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </li>
            </c:forEach>
        </ul>
        <p class="more" data-flag="0">加载中...</p>
    </div>
</div>
<div class="replace-content" style="display: none">
    <form id="inputForm" modelAttribute="reply" action="addreply" method="post">
        <input type="hidden" id="commentsId" name="commentsId">
        <input type="hidden" name="redPerson" id="redPerson">
        <input type="hidden" name="rPerson" value="${fns:getUser().name}">
    <div class="comment-news ">
        <span class="comment-info">回复内容：</span>
        <input type="text" class="comment-content" id="rNews" name="rNews">
        <%--<button class="comment-button">确定</button>--%>
        <input type="submit" value="确定" class="comment-button">
    </div>
    </form>
</div>

<style>
    /*body {*/
    /*    position: relative;*/
    /*}*/

    .comment-news {
        /*position: fixed;*/
        /*top: 180px;*/
        /*left: 12px;*/
        background-color: #efeff4;
        width: 90%;
        height: 140px;
        border-radius: 15px;
        margin-left: 15px;
        margin-top: 10px;
    }

    .comment-info {
        width: 10%;
        font-size: 12px;
        color: #666;
        margin-left: 5px;
    }

    input.comment-content {
        width: 85%;
        height: 80px;
        border-radius: 5px;
        border: 1px solid #999;
        margin-top: 5px;
        margin-left: 22px;
    }

    .comment-button {
        width: 50px;
        height: 25px;
        background-color: orangered;
        border-radius: 15px;
        border: 0;
        margin-top: 5px;
        margin-left: 235px;
    }
</style>
<script type="text/javascript">

</script>
<script src="${ctxStatic}/shopcartstatic/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/shopcartstatic/js/public.js"></script>

<!--底部导航栏 -->
<div class="nav" id="tabbar"></div>

<script type="text/javascript">
    $(function(){
        document.getElementById('homes').setAttribute("src","${ctxStatic}/shopcartstatic/images/1.1.png");
    })
</script>
<script  type="text/javascript">
    function easyLife() {
        window.location.href="https://www.baidu.com"
    }
</script>
</body>
<script>

    var html = $(".replace-content").html();
    console.log(html)


    function aaa(bb,id) {
        console.log(bb)
        bb.parentElement.nextSibling.nextElementSibling.innerHTML = html;
        $("#commentsId").val(id);
    }
    function bbb(bb,id,redPerson) {
        console.log(bb)
        bb.parentElement.parentElement.parentElement.parentElement.innerHTML = html;
        $("#commentsId").val(id);
        $("#redPerson").val(redPerson);
    }

</script>

</html>